﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/layout.css" rel="stylesheet" />
    <style>
        .map {
            width: 1500px;
            height: 1080px;
            background: url(images/map.png) no-repeat center;
            background-size: contain;
        }
        .location {
            color: #fff;
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .location:before{
            content: "";
            width: 30px;
            height: 45px;
            display: block;
            margin: auto;
            margin-bottom: 10px;
            background: url(images/location.png) no-repeat center;
            background-size: contain;
        }
            .location:after {
                content: "";
                position: absolute;
                top: 45px;
                left: 0;
                right: 0;
                margin: auto;
                width: 25px;
                height: 7px;
                border-radius: 100%;
                background: url(images/location-shadow.png) no-repeat center;
                background-size: contain;
            }
    </style>
</head>
<body>
    <div class="map central">
        <a href="javascript:;" class="location" style="top: 495px; left: 590px;">CHINA</a>
        <a href="javascript:;" class="location" style="top: 365px; left: 109px;">LUXEMBOURG</a>
    </div>
    <div class="modal-container">
        <div class="modal-wrapper">
            <div class="modal-content"></div>
        </div>
    </div>
    <nav>
        <a href="#" class="home"></a>
        <a href="#" class="back"></a>
        <a href="#" class="refresh"></a>
    </nav>
    <script src="js/global.js"></script>
</body>
</html>